<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>V3自定义插件</title>
  </head>
  <body>
    <div id="app">
      {{str}} - {{tran('welcome')}} - {{tran('bye')}}
      <button @click=" lang = 'zh' ">中文</button>
      <button @click=" lang = 'en' ">英文</button>
    </div>
  </body>

  <script src="../lib/vue.global.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          lang: "en",
        };
      },
    });

    const langObject = {
      zh: {
        welcome: "欢迎",
        bye: "再见",
      },
      en: {
        welcome: "welcome",
        bye: "bye",
      },
    };


    // 国际化 -- I18n
  const I18nPlugin = {
    install (app, options) {
      console.log(app) // app.config 给原型 添加属性和方法
      console.log(options) // langObject
      console.log(this) // install方法

      app.config.globalProperties.str = '测试'

      // 全局定义方法之后，调用时  this指向使用者
      app.config.globalProperties.tran = function (item) {
        console.log('item', item) // welcome bye
        console.log('this', this) // app对应的实例

        return options[this.lang][item] // langObject['en']['welcome']
      }
    }
  }

    app.use(I18nPlugin,langObject);

    app.mount("#app");
  </script>
</html>
